<script setup lang="ts">
import { AlertOutlined, FileTextOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  data: {
    type: String,
    default: '',
  },
});

const dataWithLineBreaks = computed(() => {
  if (typeof props.data === 'string') {
    return props.data.replace(/\n/g, '<br>');
  }
  return '';
});
</script>

<template>
  <div class="">
    <!-- 标题 -->
    <h3 class="flex items-center border-b border-gray-200 pb-4 text-xl font-semibold">
      <AlertOutlined class="mr-2 text-red-500" />
      入侵特点
    </h3>

    <!-- 内容 -->
    <div class="mt-4">
      <div v-if="dataWithLineBreaks" class="rounded-lg bg-gray-50 p-4">
        <div class="leading-relaxed text-gray-700" v-html="dataWithLineBreaks"></div>
      </div>

      <div v-else class="py-8 text-center">
        <FileTextOutlined class="mb-2 text-2xl text-gray-400" />
        <p class="text-gray-500">暂无数据</p>
      </div>
    </div>
  </div>
</template>
